<template>
    <div class="main-box">
        <div class="man-top">

            <div class="left-bar">
                <i class="layui-icon layui-icon-shrink-right"></i>
            </div>

            <div class="center-bar">
                <ul>
                    <li><a href="#" class="action">助学</a></li>
                    <li><a href="#">系统</a></li>
                    <li><a href="#">定时</a></li>
                </ul>
            </div>

            <div class="right-bar">
                <div class="right-bar-left">
                    <p>admin<br>管理员</p>
                    <i class="layui-icon layui-icon-user"></i>
                </div>
                <div class="right-bar-right" >
                    <ul>
                        <!--<li><i class="layui-icon layui-icon-app"  title="系统主页"></i></li>-->
                        <li><i class="layui-icon layui-icon-engine" title="更新缓存"></i></li>
                        <li><i class="layui-icon layui-icon-home" title="系统主页"></i></li>
                        <li><i class="layui-icon layui-icon-tips" title="退出"></i></li>
                    </ul>
                </div>

            </div>

        </div>
        <div class="man-center">
            <div class="man-center-left">
                <div class="nv">
                    <ul>
                        <li class="action">
                            <i class="students"></i>
                            <span>学员</span>
                        </li>
                        <li>
                            <i class="school"></i>
                            <span>院校</span>
                        </li>
                        <li>
                            <i class="order"></i>
                            <span>工单</span>
                        </li>
                    </ul>
                </div>
                <div class="nd">
                    <ul>
                        <li class="action">添加学员</li>
                        <li>学员列表</li>
                        <li>添加学员</li>
                    </ul>
                </div>
            </div>
            <div class="man-center-right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                windowWidth:false,
            }
        },
        methods:{
            windowResize(){
                $('.man-center-right')
                    .width($(window).width()-210-40)
                    .height($(window).height()-50)
            }
        },
        created(){

        },
        mounted(){
            this.windowResize();
            $(window).resize(res=>{
                this.windowResize();
            });
        }
    }
</script>

<style lang="scss">
    //导航的css
    @import "../../scss/navbase";

    $width:210px;
    $height:50px;
    .main-box{
        /*overflow: hidden;*/


    }
    .man-top{
        width: 100%;
        height: $height;
        line-height: $height;
        background-color: #293038;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 3;
        color: white;
        overflow: hidden;
        .left-bar{
            float: left;
            width: $width;
            height: auto;
            color: white;
            text-align: right;
            background: url("../../assets/images/admin/login.png") no-repeat 35px 10px;
            .layui-icon{
                padding: 10px;
                cursor:pointer;
            }
        }
        .center-bar{
            float: left;
            ul{
                margin-left: -1px;
            }
            ul li{
                float: left;
                line-height: 10px;
                height: 10px;
                margin: 19px 0;
                border-left: solid 1px rgba(255,255,255,0.25);
                box-shadow: -1px 0 0 rgba(0,0,0,0.15);
            }

            ul li:first-child{
                border-left: none;
            }
            ul li a {
                font-size: 15px;
                line-height: 20px;
                color: #FFF;
                display: block;
                height: 20px;
                padding: 14px 25px;
                margin-top: -19px;
                margin-left: 1px;
                margin-right: 2px;
                opacity: 0.8;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
            }
            ul li a:hover {
                background: rgba(255,255,255,0.15);
                opacity: 1;
            }
            ul li a.action{
                background: rgba(255,255,255,0.15);
                opacity: 1;
            }
        }
        .right-bar{
            float: right;
            .right-bar-left{
                float: left;
                line-height: 50px;
                padding-right: 10px;
                p{
                    line-height: 15px;
                    color: white;
                    padding-top: 10px;
                    display: inline-block;
                    float: left;
                    font-size: 12px;
                    letter-spacing: 1px;
                }
                .layui-icon{
                    display: inline-block;
                    line-height: $height;
                    font-size: 25px;
                    margin-left: 10px;
                }
            }
            .right-bar-right{
                overflow: hidden;
                ul{
                    height: $height;
                    border-left: 1px solid rgba(255,255,255,0.25);
                    box-shadow: -1px 0 0 rgba(0,0,0,0.15);
                }
                ul li{
                    float: left;
                    font-size: 30px;
                    cursor: pointer;
                    padding: 0 10px;

                }
                ul li:hover{
                    background: rgba(255,255,255,0.15);

                }
                ul li i{
                    font-size: 30px;
                }
            }


        }
    }
    .man-center{

        position: fixed;
        top: 50px;
        width: 100%;
        height: 100%;
        .man-center-left{
            width: 210px;
            float: left;
            height: 100%;
            overflow: hidden;
            position: relative;
            .nv{
                position: relative;
                width: 70px;
                height: 100%;
                background-color:#4fc0e8;
                color: white;
                ul{
                    display: block;
                    overflow: hidden;
                    padding-bottom: 10px;
                }
                ul li{/************************************************************/
                    position: relative;
                    height: 70px;
                    width: 70px;
                    text-align: center;
                    font-size: 12px;
                    font-weight: 500;
                    opacity: .7;
                    cursor: pointer;
                }
                ul li.action{/************************************************************/
                    font-weight: 700;
                    opacity: 1;
                    background-image:url("../../assets/images/admin/highlighted.png") ;
                    background-repeat: no-repeat;
                    background-position: left top;

                }
                ul li:hover:not(.action){/************************************************************/
                    background: rgba(255,255,255,0.2);
                }



                ul li i{
                    /*border: 1px solid red;*/
                    height: 30px;
                    width: 30px;
                    display: inline-block;
                    background-image: url("../../assets/images/admin/nv.png");
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 15px;
                    left: 23px;
                }
                ul li span{
                    color: white;
                    position: absolute;
                    top: 43px;
                    left: 20px;
                }


            }
            .nd{
                background-color: #ccc;
                height: 100%;
                position: absolute;
                left: 70px;
                top: 0px;
                line-height: 36px;
                ul {
                    background-color: #f1f1f1;
                    height: 100%;
                }
                ul li{
                    height: 36px;
                    line-height: 36px;
                    font-size: 12px;
                    width: 140px;
                    background-image: url("../../assets/images/admin/nv.png");
                    background-position: left -370px;
                    background-repeat: no-repeat;
                    text-indent: 2em;
                    overflow: hidden;
                    background-color: #f1f1f1;
                    cursor: pointer;
                    text-shadow: 1px 1px 0 rgba(255,255,255,0.75);
                }
                ul li.action{
                    background-position: left -331px;
                    font-weight: 700;
                }
                ul li:hover:not(.action){
                    background-color: rgba(255,255,255,0.5);
                }

            }
        }
        .man-center-right{
            position: relative;
            float: left;
            padding:0 20px;
            overflow-y: auto;
        }

    }


</style>
